<template>
	<div class="login">
		<div class="back" @click="back">
			<span class="iconfont icon-fanhui"></span>
		</div>
		<h1 class="title">美食外卖</h1>
		<form @submit.prevent="login">
			<div class="login-content">
				<span class="mlogin" :class="{'active':show_cateloge}" @click="toggle">短信登陆</span>
				<span class="plogin" :class="{'active':!show_cateloge}" @click="toggle">密码登陆</span>
				<div class="login-message" v-show="show_cateloge">
					<div class="messtop">
						<input type="tel" class="tel" maxlength="11" placeholder="手机号" v-model="phone">
						<button class="get_verification"
							    :disabled="!rightPhone"
							    :class="{'right_phone':rightPhone}"
							    @click.prevent="getCode"
						>{{computeTime>0?`重新发送(${computeTime}s)`:'获取验证码'}}</button>
					</div>
				<input type="text" class="verification" maxlength="8" placeholder="验证码" v-model="code">
				<p class="info">温馨提示：未注册美食外卖账号的手机号、登陆时将自动注册，且代表已同意<span class="stress">《用户服务登陆》</span></p>
				</div>
				<div class="login-password" v-show="!show_cateloge">
					<input type="text" class="input" placeholder="手机/邮箱/用户名" v-model="name">
					<input type="text" class="input" placeholder="密码" v-if="showPwd" v-model="pwd">
					<input type="password" class="input" placeholder="密码"  v-model="pwd" v-else>
					<div class="switch_button off" @click="showPwd=!showPwd" :class="{'toggle':showPwd}">
						<div class="switch_circle" :class="{'toggle':showPwd}"></div>
						<span class="switch_text" :class="{'toggle':showPwd}">{{showPwd?'……':'abs'}}</span>
					</div>
					<input type="text" class="input" placeholder="验证码" v-model="captcha">
				</div>
				<button class="submit" type="submit" >登陆</button>
				<div class="aboutus">关于我们</div>
			</div>
		</form>
		<alertTip :alertText="this.alertText" v-show="showAlert" @closeTip="close"></alertTip>
	</div>
</template>

<script>
	import alertTip from 'components/alertTip/alertTip'
	export default {
		data() {
			return {
				show_cateloge:true,
				phone: '',
				computeTime:0,
				showPwd: false,
				pwd: '',
				code: '',
				name: '',
				captcha: '',
				alertText: '',
				showAlert: false,
			}
		},
		computed: {
			rightPhone() {
				return /^1\d{10}$/.test(this.phone)
			}
		},
		methods: {
			back() {
				this.$router.back()
			},
			toggle() {
				this.show_cateloge = !this.show_cateloge
			},
			getCode() {
				//启动倒计时
				if(!this.computeTime) {
					this.computeTime = 30
					const intervalId = setInterval(() => {
						this.computeTime--;
						if(this.computeTime<=0) {
							clearInterval(intervalId);
						}
					},1000)
					//发送ajax请求向指定手机号发送验证码短信
				}			
			},
			login() {
				if(this.show_cateloge) {
					const {rightPhone,code} = this
					if(!this.rightPhone) {
						this._showAlertBox('手机号码')
					}
					else if(!/^\d{6}$/.test(code)) {
						this._showAlertBox('验证码')
					}
				}
				else{
					const {name,pwd,captcha} = this
					if(!this.name) {
						this._showAlertBox('用户名')
					}
					else if(!this.pwd) {
						this._showAlertBox('密码')
					}
					else if(!this.captcha) {
						this._showAlertBox('验证码')
					}
				}
			},
			close() {
				this.showAlert = false
				this.alertText = ''
			},
			_showAlertBox(detail) {
				this.showAlert = true
				this.alertText = `${detail}输入不正确`
			}
		},
		components: {
			alertTip,
		}
	}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/mixin.styl'
	.login
		width 100%
		height 100%
		position relative
		z-index 110
		.back
			margin 5px
			width 32px
			height 32px
			border-radius 50%
			background-color $yellow
			text-align center
			.iconfont
				line-height 32px
				font-size 20px
				color $text
		.title
			margin-top 40px
			text-align center
			color $yellow
			font-size 40px
			font-weight 700
		.login-content
			margin 28px
			text-align center
			.mlogin,.plogin
				display inline-block
				font-size 14px
				line-height 28px
				&.active
					color $yellow
					border-bottom 2px solid $yellow
			.mlogin 
				margin-right 30px
			.messtop
				width 100%
				margin-top 15px
				position relative
				padding 0 5px
				line-height 32px
				font-size 14px
				border 1px solid #ccc
				text-align left
				border-radius 5px
				.get_verification
					position absolute
					right 0px
					top 0
					padding 0 5px
					line-height 32px
					border-radius 5px
					background-color #fff
					&.right_phone
						color #fff
						background-color $yellow		
			.verification
				margin 20px 0
				padding 0 5px
				line-height 32px
				font-size 14px
				border 1px solid #ccc
				width 100%
				border-radius 5px
			.info 
				text-align left
				width 100%
				color #777
				line-height 20px
				.stress
					color $yellow		
			.submit
				margin-top 40px
				width 100%
				height 40px
				line-height 40px
				font-size 16px
				border-radius 5px
				color $text
				background-color $yellow
			.aboutus
				color #777
				margin-top 20px
			.login-password
				position relative
				.input
					width 100%
					margin-top 15px 
					padding-left 5px
					line-height 32px
					font-size 14px
					color #777
					border 1px solid #ccc 
					border-radius 5px
				.switch_button
					width 60px
					height 16px
					position absolute
					top 72px
					right -5px
					border 1px solid #ccc
					border-radius 10px
					&.toggle
						background-color $yellow
						border 1px solid #fff
					.switch_circle
						margin-top -3px
						width 20px
						height 20px
						border-radius 50%
						border 1px solid #ccc
						background-color #fff
						box-shadow 0 2px 4px 0 rgba(0,0,0,.1)
						transition transform .3s
						&.toggle 
							transform translateX(40px)
							background-color #fff
							border 1px solid $yellow
					.switch_text
						float right 
						margin-top -18px
						margin-right 6px
						color #ccc
						&.toggle
							float left
							margin-top -22px
							margin-left 6px
							color #fff
						
						
							
</style>